<template>
  <div class="mb-container">
    <div class="echarts-container" ref="myEcharts"></div>
  </div>
</template>

<script setup lang="ts">
import {onBeforeUnmount, onMounted, ref, watch} from "vue";
import * as echarts from "echarts";
//@ts-ignore
import getDataStore from "@/piniaStore/Data/dataStore.ts";
//@ts-ignore
import {T_SimData} from "@/assets/dataDemo/type.ts";


let myEcharts = ref();
let timer: number | null = null;
let chartInstance: echarts.ECharts | null = null;

let dataStore = getDataStore()
let simData = ref<T_SimData[]>(dataStore.flightData.simData);

let currentDataIndex = ref(0);

const option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
    },
    formatter: function (params) {
      let tipHtml = ''; // 用于存储最终的tooltip内容
      tipHtml = `仿真时间 : ${params[0].axisValueLabel} s<br>`
      params.forEach(function (param, index) {
        // 根据不同的series，添加不同的单位
        let unit = '';
        switch (param.seriesName) {
          case '载荷X':
          case '载荷Y':
            unit = 'N'; // 力的单位牛顿
            break;
          case '位移X':
          case '位移Y':
            unit = 'mm'; // 位移的单位毫米
            break;
          default:
            break;
        }
        // 拼接tooltip内容，包括数值和单位
        tipHtml += `${param.marker} ${param.seriesName}: ${param.value} ${unit}<br/>`;
      });
      return tipHtml;
    },
  },
  legend: {
    data: ['载荷X', '载荷Y', '位移X', '位移Y'],
    // 可以添加更多配置，比如位置等
    orient: 'vertical', // 图例水平排列
    right: 'right',
    top: 'center'
  },
  xAxis: {
    name: '仿真时长/s',
    type: 'category',
    boundaryGap: false,
    data: [], // 将根据Time动态填充
    axisLine: {
      show: true,
      lineStyle: {
        color: 'gray',
        width: 2
      }
    },
    splitLine: {
      show: false,
    },
    nameTextStyle: { // 增大坐标轴名称字体大小
      fontSize: 20, // 请按需调整大小
    },
    axisLabel: { // 增大坐标轴刻度标签（数字）字体大小
      fontSize: 15, // 请按需调整大小
    },
    // 将横轴标题放置在底部并居中
    nameLocation: 'middle',
    // 调整标题与横轴之间的距离，根据实际情况调整
    nameGap: 25
  },
  yAxis: [
    {
      name: '载荷/N',
      type: 'value',
      position: 'left',
      min:103.5,
      max:104.5,
      axisLine: {
        show: true,
        lineStyle: {
          color: 'gray',
          width: 2
        }
      },
      splitLine: {
        show: false,
      },
      nameTextStyle: { // 增大坐标轴名称字体大小
        fontSize: 20, // 请按需调整大小
      },
      axisLabel: { // 增大坐标轴刻度标签（数字）字体大小
        fontSize: 15, // 请按需调整大小
      },
    },
    {
      name: '位移/mm',
      type: 'value',
      min:.95,
      max:1.2,
      position: 'right',
      axisLine: { // 添加右侧y轴轴线
        show: true,
        lineStyle: {
          color: 'gray',
          width: 2
        }
      },
      splitLine: { // 隐藏右侧y轴的水平参考线
        show: false,
      },
      nameTextStyle: { // 增大坐标轴名称字体大小
        fontSize: 20, // 请按需调整大小
      },
      axisLabel: { // 增大坐标轴刻度标签（数字）字体大小
        fontSize: 15, // 请按需调整大小
      },
    },
  ],
  series: [
    {
      name: '载荷X',
      type: 'line',
      yAxisIndex: 0,
      data: [],
      lineStyle: { // 添加这一行来设置线条样式
        width: 5, // 设置线条宽度
      },
    },
    {
      name: '载荷Y',
      type: 'line',
      yAxisIndex: 0,
      data: [],
      lineStyle: { // 添加这一行来设置线条样式
        width: 5, // 设置线条宽度
      },
    },
    {
      name: '位移X',
      type: 'line',
      yAxisIndex: 1,
      data: [],
      lineStyle: { // 添加这一行来设置线条样式
        width: 5, // 设置线条宽度
      },
    },
    {
      name: '位移Y',
      type: 'line',
      yAxisIndex: 1,
      data: [],
      lineStyle: { // 添加这一行来设置线条样式
        width: 5, // 设置线条宽度
      },
    },
  ],
};

const updateChartData = () => {


  if (currentDataIndex.value < simData.value.length) {
    const dataPoint = simData.value[currentDataIndex.value];

    option.xAxis.data.push(Number(dataPoint.Time));
    option.series[0].data.push(Number(dataPoint.LoadX));
    option.series[1].data.push(Number(dataPoint.LoadY));
    option.series[2].data.push(Number(dataPoint.DisplacementX));
    option.series[3].data.push(Number(dataPoint.DisplacementY));


    if (option.series[0].data.length > 100) {
      option.xAxis.data.shift();
      option.series.forEach(series => series.data.shift());
    }


    chartInstance?.setOption(option, true);
    currentDataIndex.value++;
  } else {
    clearInterval(timer);
    timer = null;
  }
};

onMounted(() => {
  chartInstance = echarts.init(myEcharts.value!);
  chartInstance.setOption(option);
  timer = setInterval(updateChartData, 1000);

  watch(
      () => simData.value.length,
      () => {
        if (simData.value.length > currentDataIndex.value && !timer) {
          currentDataIndex.value = 0;
          timer = setInterval(updateChartData, 1000);
        }
      },
      {immediate: true}
  );
});

onBeforeUnmount(() => {
  clearInterval(timer);
  timer = null;
});
</script>

<style scoped lang="scss">
.mb-container {
  width: 100%;
  height: 100%;


  .echarts-container {
    height: 96%;
    width: 100%;
    //background-color: rgba(255, 255, 255, 0.76);
  }
}
</style>